import { useEffect, useState, useMemo } from "react";
import { Form, Skeleton, ErrorBlock, Grid } from 'antd-mobile';
import { Treemap } from '@ant-design/plots';
import { HistogramOutline, FrownOutline } from 'antd-mobile-icons';
import { useSelector, useDispatch } from 'react-redux';
import { PortraitAnalysisTitle } from './PortraitAnalysisTitle';
import { fetchExplain2 } from '../slices/questionsSlice';
import { useWindowSize } from "@uidotdev/usehooks";
import { Explain } from './Explain';

export function TimeAllocationTreeMap({ data }) {
    const dispatch = useDispatch();
    const analysis = useSelector(state => state.questions.present.analysis);
    const explain2 = useSelector(state => state.questions.present.explain2);
    const [loading, setLoading] = useState(true);
    const [explainVisible, setExplainVisible] = useState(false);
    const { width: windowWidth, } = useWindowSize();
    const chartsColumn = useMemo(() => windowWidth < 700 ? 1 : 2, [windowWidth]);
    const chartsSpan = useMemo(() => (chartsColumn === 2 && !explainVisible) ? 2 : 1, [chartsColumn, explainVisible]);
    useEffect(() => {
        let timeout;
        function init() {
            setLoading(true);
            setExplainVisible(false);
            if (analysis?.status === 'success') {
                timeout = setTimeout(() => setLoading(false), 1000);
            }
        }
        init();
        return () => clearTimeout(timeout);
    }, [data, analysis?.status]);
    useEffect(() => {
        let timeout;
        if (explainVisible && explain2?.status !== 'success' && explain2?.status !== 'pending') {
            function fetch() {
                timeout = setTimeout(() => dispatch(fetchExplain2(data.result)), 100);
            }
            fetch();
        }
        return () => clearTimeout(timeout);
    }, [explainVisible, explain2?.status, data?.result, dispatch]);

    return analysis && <Form.Item
        label={loading ? "" : <>
            <HistogramOutline color='#000' />&nbsp;
            <PortraitAnalysisTitle
                text={"您的学习生活画像分析。"}
                explainLabelStyle={{ textDecoration: "underline", color: "#229880", cursor: "pointer" }}
                explainLabel={data && data.result && data.result.length > 0 ? (explainVisible ? "收起解释" : "解释此画像") : ""}
                onClickExplain={() => setExplainVisible(!explainVisible)}
                speed={10}
            >
            </PortraitAnalysisTitle>
        </>}
    >
        {
            loading ?
                <>
                    <Skeleton.Title animated />
                    <Skeleton.Paragraph lineCount={7} animated />
                </>
                :
                (
                    data && data.result && data.result.length > 0 ?
                        <>
                            <Grid columns={chartsColumn} gap={8}>
                                <Grid.Item span={chartsSpan}>
                                    <Treemap {...{
                                        data: {
                                            name: 'root',
                                            children: data.result.map(as => ({ value: as.score, name: as.label }))
                                        }
                                    }} />
                                </Grid.Item>
                                {
                                    explainVisible && <Grid.Item>
                                        <Explain data={explain2}></Explain>
                                    </Grid.Item>
                                }
                            </Grid>
                        </>
                        :
                        <>
                            <ErrorBlock status='default' description={
                                <span>
                                    <FrownOutline color='#000' />
                                    {data && data.error ? data.error : '不好意思，我无法理解您的回答, 请完善回答并重新点击分析。'}
                                </span>
                            } />
                        </>
                )
        }

    </Form.Item>;
}
